<!-- 栏目管理 -->
<template>
  <el-card>
    <el-row>
      <el-form ref="form" :model="searchDto" inline label-suffix=":">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="searchDto.keywords"
            placeholder="请输入关键字"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-plus" type="primary" @click="addAppliance"
            >新增栏目</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>

    <page-table
      ref="recovery"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column
        type="index"
        label="编号"
        width="80"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="name"
        label="栏目名称"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sort"
        label="排序"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="enable" label="启用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="scope.row.belong !== 'OTHER'"
            active-value="YES"
            inactive-value="NO">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="center" width="300" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-edit"
              :disabled="scope.row.belong !== 'OTHER'"
              @click="editAppliance(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-delete"
              :disabled="scope.row.belong !== 'OTHER'"
              @click="delAppliance(scope.row)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </page-table>
  </el-card>
</template>
    <script>
export default {
  name: "programList",
  data() {
    return {
      form:{
        name:null,
        sort:null,
        enable:null
      },
      pageData: {},
      loading: false,
      disabled:false,
      searchDto: {
        pageIndex:null,
        pageSize:null,
        keywords:null,
      },
      switchValue: true,
    };
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getRecoveryItemPageList(tem).then((ret) => {
        this.pageData = ret.data;
      });
    },

    // 查询
    search() {
      this.getPageData();
    },

    //清空
    clear() {
      this.$refs.form.resetFields();
      this.getPageData();
    },
    //   编辑
    editAppliance(row) {
      console.log('row:',row);
      this.$router.push({ name: "programEdit", params: { row } });
    },

    // 新增
    addAppliance() {
      this.$router.push({ name: "programAdd" });
    },
    //   详情
    view({ id }) {
      this.$router.push({ name: "programDetail", query: { id } });
    },

    // 删除
    delAppliance({ id }) {
      this.$confirm("确认删除此栏目?", "提示", { type: "warning" }).then(() => {
        this.API.deleteRecoveryItemById({ id }) 
          .then((ret) => {
            this.success("删除成功!");
            this.getPageData();
          })
          .catch((err) => {
            this.warning(err);
          });
      });
    },
  },
  mounted() {
    this.getPageData();
  },
};
</script>
    
<style scoped lang="scss"></style>
    